<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="zh" xml:lang="zh"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
<ui:composition template="templates/common.xhtml">
    <ui:define name="pageTitle">#{labels.appName}</ui:define>
    <ui:define name="mainContents">
        <div class="row">
            <div class="large-10 large-centered columns">
                <nav class="breadcrumbs">
                    <h:outputLink value="index.html">#{labels.commonMenuGlance}</h:outputLink>
                    <h:outputLink value="#{'#'}" styleClass="unavailable">#{labels.commonMenuVenue}</h:outputLink>
                    <h:outputLink value="#{'#'}"
                                  styleClass="current">#{labels.commonMenuCustomerTypeManage}</h:outputLink>
                </nav>
            </div>
        </div>
        <div class="row">
            <div class="large-11 large-centered columns">
                <div class="row">
                    <h:form id="customer_type_form">
                        <div class="large-4 large-offset-2 columns">
                            <fieldset>
                                <legend>#{labels.custypeManageTypes}</legend>
                                <div class="row collapse">
                                    <div class="large-9 columns">
                                        <h:inputText id="search" value="#{customerTypeFormBean.searchKeyword}"
                                                     p:placeholder="#{labels.custypeManageTypeSearch}"/>
                                    </div>
                                    <div class="large-3 columns">
                                        <h:commandButton value="#{labels.formSearch}" styleClass="button postfix"
                                                         action="#{customerTypeBean.searchTypes}">
                                            <f:ajax execute="search" render="customertypes"/>
                                        </h:commandButton>
                                    </div>
                                </div>
                                <h:selectOneListbox id="customertypes" value="#{customerTypeFormBean.selectedType}"
                                                    style="background: none; height: 100%" size="18"
                                                    valueChangeListener="#{customerTypeSelectBean.loadCustomerTypeDetail}">
                                    <f:selectItem itemLabel="#{labels.formAddContent}" itemValue="new_content"/>
                                    <f:selectItems value="#{customerTypesBean.types}" var="type"
                                                   itemLabel="#{type.customerTypeName}" itemValue="#{type.customerTypeId}"/>
                                    <f:ajax render="@form"/>
                                </h:selectOneListbox>
                            </fieldset>
                        </div>
                        <div class="large-4 columns">
                            <fieldset>
                                <legend>#{customerTypeFormBean.addMode?labels.custypeManageTypeAdd:labels.custypeManageTypeModify}</legend>
                                <div class="row">
                                    <div class="large-12 columns">
                                        <h:outputLabel value="#{labels.custypeManageTypeName}" for="typeName"/>
                                        <h:inputText id="typeName" value="#{customerTypeFormBean.typeName}"/>
                                    </div>
                                    <div class="large-6 columns">
                                        <h:selectBooleanCheckbox id="precharge" value="#{customerTypeFormBean.precharged}"/>
                                        <h:outputLabel for="precharge" value="#{labels.custypeManageTypePrechaged}"/>
                                    </div>
                                    <div class="large-6 columns">
                                        <h:selectBooleanCheckbox id="multicharge"
                                                                 value="#{customerTypeFormBean.multipleAllowed}"/>
                                        <h:outputLabel for="multicharge"
                                                       value="#{labels.custypeManageTypeMultiCharge}"/>
                                    </div>
                                    <div class="large-12 columns">
                                        <div class="row collapse">
                                            <h:outputLabel value="#{labels.custypeManageTypeDiscount}"/>

                                            <div class="small-10 columns">
                                                <h:inputText value="#{customerTypeFormBean.discount}"/>
                                            </div>
                                            <div class="small-2 columns">
                                                <span class="postfix">%</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="large-12 columns">
                                        <h:outputLabel value="#{labels.custypeManageTypeChargeType}"/>
                                        <h:selectOneMenu value="#{customerTypeFormBean.selectedCharge}">
                                            <f:selectItems value="#{chargeTypeBean.types}" var="ctype"
                                                           itemLabel="#{labels[ctype.localeSign]}" itemValue="#{ctype.codeSign}"/>
                                        </h:selectOneMenu>
                                    </div>
                                    <div class="large-12 columns">
                                        <h:outputLabel value="#{labels.custypeManageTypeUsableTime}"/>
                                        <h:selectOneMenu value="#{customerTypeFormBean.selectedUsable}">
                                            <f:selectItems value="#{usableTimeBean.times}" var="time"
                                                           itemLabel="#{labels[time.localeSign]}" itemValue="#{time.codeSign}"/>
                                        </h:selectOneMenu>
                                    </div>
                                </div>
                                <ul class="button-group even-3">
                                    <li>
                                        <h:commandButton value="#{labels.formRemove}"
                                                         onclick="return confirm('#{labels.custypeManageConfirmDelete}');"
                                                         action="#{customerTypeBean.deleteCustomerType}"
                                                         styleClass="button small alert">
                                            <f:ajax render="@form"/>
                                        </h:commandButton>
                                    </li>
                                    <li>
                                        <h:commandButton value="#{labels.formSave}" styleClass="button small"
                                                         action="#{customerTypeBean.saveCustomerType}">
                                            <f:ajax execute="@form" render="@form"/>
                                        </h:commandButton>
                                    </li>
                                    <li>
                                        <h:commandButton value="#{labels.formReset}" styleClass="button small secondary"
                                                         type="reset"/>
                                    </li>
                                </ul>
                            </fieldset>
                        </div>
                        <h:inputHidden id="addMode" value="#{customerTypeFormBean.addMode}"/>
                    </h:form>
                </div>
            </div>
        </div>
    </ui:define>
</ui:composition>
</html>
